<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<!-- 		<u-calendar :maxDate="maxDate" :defaultDate="defaultDate" mode="single" color="#347DFE" confirmText="提交"
			@confirm="confirm">
		</u-calendar> -->

		<view class="tab-box acea-row ">
			<block v-for="(item,index) in tabList">
				<view class="tab-item" :class="tabIndex == index?'active':''" @click="tab(index)">
					{{item}}
				</view>
			</block>
		</view>
		<view class="calendar-box">
			<uni-calendar :insert="true" :lunar="false" :date="defaultDate1" :start-date="date1" :end-date="maxDate1"
				@change="change1" v-if="tabIndex == 0" />
			<uni-calendar :insert="true" :lunar="false" :date="defaultDate2" :start-date="date2" :end-date="maxDate2"
				@change="change2" v-else />
		</view>
		<view class="btn-box">
			<view class="btn" @click="submit"> 保存 </view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear();
	let month1 = d.getMonth() + 1;
	let month2 = d.getMonth() + 2;
	let tabList = [`${month1}月`, `${month2}月`]
	month1 = month1 < 10 ? `0${month1}` : month1;
	month2 = month2 < 10 ? `0${month2}` : month2;
	var day = d.getDate();
	const date1 = `${year}-${month1}-${day}` // 今日
	const date2 = `${year}-${month2 }-0${1}` // 下月第一日
	const date3 = `${year}-${month1}-${d.getDate() +1}` // 明日
	export default {

		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '公益日程管理',
					'color': true,
					'class': 'on'
				},
				maxDate1: '',
				date1: '',
				maxDate2: '',
				date2: '',
				defaultDate1: '',
				defaultDate2: '',
				// defaultDate: ['2022-06-20'],/
				tabList: ['七月', '八月'],
				tabIndex: 0,
				public_schedule: ['2022-07-20', '2022-08-20']
			};

		},
		onLoad(option) {
			console.log(option.free);
			var a = this.isBlank(option.free)
			if (!a) {
				var defaultDateMultiple = JSON.parse(option.free)
				console.log('defaultDateMultiple', defaultDateMultiple);
				if (defaultDateMultiple.length == 1) {
					this.defaultDate1 = defaultDateMultiple[0];
					this.defaultDate2 = date2;
					console.log(1);
				} else {
					this.defaultDate1 = defaultDateMultiple[0];
					this.defaultDate2 = defaultDateMultiple[1];
					console.log(2);
				}

				console.log('已设置', this.defaultDate1, this.defaultDate2);
			} else {
				// 如果没有设置公益陪诊日 则默认为明日和下月第一日
				this.defaultDate1 = date3;
				this.defaultDate2 = date2;
				console.log('未设置', this.defaultDate1, this.defaultDate2);
			}
			// var defaultDateMultiple = ['2022-07-20','2022-08-20']
			console.log(date1, date2);
			this.date1 = date1;
			this.date2 = date2;
			this.tabList = tabList;
			this.getLastDay()
			this.getNextLastDay()


		},
		onShow() {

		},

		methods: {
			async userInfos(date) {
				const res = await this.$myRequest({
					url: '/api/Manage/setFreeService',
					data: {
						openid: uni.getStorageSync('openid'),
						date: date
					}
				})
				if (res.data.status == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '提交成功',
						complete() {
							uni.navigateBack()
						}
					})
				}
			},
			tab(index) {
				this.tabIndex = index
			},

			// 判断是否为空 返回true/false
			isBlank(data) {
				if (
					data == null ||
					data === 'null' ||
					data === '' ||
					data === undefined ||
					data === 'undefined' ||
					data === 'unknown' ||
					data === '[]'
				) {
					return true
				} else {
					return false
				}
			},
			//获取本月的最后一天
			getLastDay() {
				var date = new Date();
				var new_month = date.getMonth() + 1;
				//取当前的年份
				var new_year = date.getFullYear();
				//取当年当月中的第一天
				var new_date = new Date(new_year, new_month, 1);
				var currentdate =
					`${new_year}-${new_month}-${new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate()}`;

				this.maxDate1 = currentdate;

				// 如果今日是本月最后一天 则默认当月公益陪诊日为最后一天
				if (day == new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate()) {
					this.defaultDate1 = currentdate;
					console.log('未设置2', this.defaultDate1, this.defaultDate2);
				}


			},
			//获取下月的最后一天
			getNextLastDay() {
				var date = new Date();
				var new_month = date.getMonth() + 2;
				//取当前的年份
				var new_year = date.getFullYear();
				//取当年下月中的第一天
				var new_date = new Date(new_year, new_month, 1);
				var currentdate =
					`${new_year}-${new_month}-${new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate()}`;
				this.maxDate2 = currentdate;
			},

			change1(e) {
				console.log(e.fulldate);
				this.public_schedule[0] = e.fulldate
				console.log(this.public_schedule);
			},
			change2(e) {
				console.log(e.fulldate);
				this.public_schedule[1] = e.fulldate
				console.log(this.public_schedule);
			},
			submit() {
				console.log(this.public_schedule);
				this.userInfos(this.public_schedule)
			}


		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 20rpx;
	}

	.tab-box {
		padding: 30rpx;
		background-color: #fff;
	}

	.tab-box .tab-item {
		width: 50%;
		text-align: center;
		padding-bottom: 24rpx;
		color: #333;
		font-size: 28rpx;
		position: relative;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		background-color: #677afd;
		height: 6rpx;
		border-radius: 4rpx;
		width: 40rpx;
	}

	.cont {
		padding-top: 30rpx;
	}

	.cont text {
		color: red;
	}

	.btn-box {
		padding: 30rpx;
		padding-top: 40rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
